<template>
  <div>
    <div class="app-container">
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>


      <div :hidden="isAvailable1">
        <el-form ref="form" :model="form.vehicleInfoDTO" label-width="100px">
          <el-form-item label="归属城市" prop="city">
            <el-select v-model="form.vehicleInfoDTO.cityId" placeholder="请选择归属城市">
              <el-option
                v-for="item in cityElementTree"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="车辆级别" prop="vehicleLevelId">
            <el-select v-model="form.vehicleInfoDTO.vehicleLevelId" placeholder="请选择车辆级别">
              <el-option
                v-for="item in levelList"
                :key="item.levelName"
                :label="item.levelName"
                :value="item.levelId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择车型" prop="vehicleTypeId">
            <el-select v-model="form.vehicleInfoDTO.vehicleTypeId" placeholder="请选择车型">
              <el-option
                v-for="item in modelList"
                :key="item.model"
                :label="item.model"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆VIN码" prop="vinCode">
            <el-input v-model="form.vehicleInfoDTO.vinCode" placeholder="请输入车辆VIN码"/>
          </el-form-item>
          <el-form-item label="车牌号" prop="licensePlate">
            <el-input v-model="form.vehicleInfoDTO.licensePlate" placeholder="请输入车牌号"/>
          </el-form-item>
          <el-form-item label="是否安装车脑" prop="installedVehicleBrain">
            <el-radio v-model="form.vehicleInfoDTO.installedVehicleBrain" value="0" label="0">是</el-radio>
            <el-radio v-model="form.vehicleInfoDTO.installedVehicleBrain" value="1" label="1">否</el-radio>
          </el-form-item>
          <div :hidden="isAvailable">
            <el-form-item label="车脑品牌" prop="vehicleBrainBrand">
              <el-input v-model="form.vehicleInfoDTO.vehicleBrainBrand" placeholder="请输入车脑品牌"/>
            </el-form-item>
            <el-form-item label="车脑编号" prop="vehicleBrainCode">
              <el-input v-model="form.vehicleInfoDTO.vehicleBrainCode" placeholder="请输入车脑编号"/>
            </el-form-item>
          </div>
          <el-form-item label="大屏品牌" prop="largeScreenBrand">
            <el-input v-model="form.vehicleInfoDTO.largeScreenBrand" placeholder="请输入大屏品牌"/>
          </el-form-item>
          <el-form-item label="大屏编号" prop="largeScreenCode">
            <el-input v-model="form.vehicleInfoDTO.largeScreenCode" placeholder="请输入大屏编号"/>
          </el-form-item>
          <el-form-item label="车辆状态" prop="vehicleStatus">
            <el-radio v-model="form.vehicleInfoDTO.vehicleStatus" label="0">启用</el-radio>
            <el-radio v-model="form.vehicleInfoDTO.vehicleStatus" label="1">停用</el-radio>
          </el-form-item>
        </el-form>
      </div>

      <div :hidden="isAvailable2">
        <el-form ref="form" :model="form.rideHailingCarInfoDTO" :rules="rules" label-width="150px">
          <el-form-item label="公司标识" prop="vehicleIdId">
            <el-input v-model="form.rideHailingCarInfoDTO.company" placeholder="请输入公司标识"/>
          </el-form-item>
          <el-form-item label="车辆厂牌" prop="brand">
            <el-input v-model="form.rideHailingCarInfoDTO.brand" placeholder="请输入车辆厂牌"/>
          </el-form-item>
          <el-form-item label="公司类型" prop="type">
            <el-input v-model="form.rideHailingCarInfoDTO.type" placeholder="请输入公司标识"/>
          </el-form-item>
          <el-form-item label="车辆所有人" prop="owner">
            <el-input v-model="form.rideHailingCarInfoDTO.owner" placeholder="请输入车辆所有人"/>
          </el-form-item>
          <el-form-item label="车辆颜色" prop="color">
            <el-input v-model="form.rideHailingCarInfoDTO.color" placeholder="请输入车辆颜色"/>
          </el-form-item>
          <el-form-item label="发动机号/电动机号" prop="engineNumber">
            <el-input v-model="form.rideHailingCarInfoDTO.engineNumber" placeholder="请输入发动机号/电动机号"/>
          </el-form-item>
          <el-form-item label="车辆注册日期" prop="registrationDate">
            <el-date-picker clearable
                            v-model="form.rideHailingCarInfoDTO.registrationDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择车辆注册日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车辆燃料类型" prop="operatingArea">
            <el-input v-model="form.rideHailingCarInfoDTO.fuelType" placeholder="请输入车辆经营区域"/>
          </el-form-item>
          <el-form-item label="发动机排量" prop="displacement">
            <el-input v-model="form.rideHailingCarInfoDTO.displacement" placeholder="请输入发动机排量"/>
          </el-form-item>
          <el-form-item label="车辆照片文件编号" prop="photoFileNumber">
            <el-input v-model="form.rideHailingCarInfoDTO.photoFileNumber" placeholder="请输入车辆照片文件编号"/>
          </el-form-item>
          <el-form-item label="运输证字号" prop="transportCertificateNumber">
            <el-input v-model="form.rideHailingCarInfoDTO.transportCertificateNumber" placeholder="请输入运输证字号"/>
          </el-form-item>
          <el-form-item label="车辆运输证发证机构" prop="transportCertificateIssuingAuthority">
            <el-input v-model="form.rideHailingCarInfoDTO.transportCertificateIssuingAuthority"
                      placeholder="请输入车辆运输证发证机构"
            />
          </el-form-item>
          <el-form-item label="车辆经营区域" prop="operatingArea">
            <el-input v-model="form.rideHailingCarInfoDTO.operatingArea" placeholder="请输入车辆经营区域"/>
          </el-form-item>
          <el-form-item label="车辆运输证有效期起" prop="transportCertificateValidFrom">
            <el-date-picker clearable
                            v-model="form.rideHailingCarInfoDTO.transportCertificateValidFrom"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择车辆运输证有效期起"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车辆运输证有效期止" prop="transportCertificateValidTo">
            <el-date-picker clearable
                            v-model="form.rideHailingCarInfoDTO.transportCertificateValidTo"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择车辆运输证有效期止"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车辆初次登记日期" prop="firstRegistrationDate">
            <el-date-picker clearable
                            v-model="form.rideHailingCarInfoDTO.firstRegistrationDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择车辆初次登记日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="车辆年审核状志" prop="nextAnnualInspectionDate">
            <el-radio v-model="form.rideHailingCarInfoDTO.annualInspectionStatus" label="0">通过</el-radio>
            <el-radio v-model="form.rideHailingCarInfoDTO.annualInspectionStatus" label="1">未通过</el-radio>
          </el-form-item>
          <el-form-item label="车辆检修状态" prop="nextAnnualInspectionDate">
            <el-radio v-model="form.rideHailingCarInfoDTO.maintenanceStatus" label="0">通过</el-radio>
            <el-radio v-model="form.rideHailingCarInfoDTO.maintenanceStatus" label="1">未通过</el-radio>
          </el-form-item>
          <el-form-item label="车辆下次年检时间" prop="nextAnnualInspectionDate">
            <el-date-picker clearable
                            v-model="form.rideHailingCarInfoDTO.nextAnnualInspectionDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择车辆下次年检时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发票打印设备序列号" prop="invoicePrinterSerialNumber">
            <el-input v-model="form.rideHailingCarInfoDTO.invoicePrinterSerialNumber"
                      placeholder="请输入发票打印设备序列号"
            />
          </el-form-item>
          <el-form-item label="卫星定位装置品牌" prop="gpsBrand">
            <el-input v-model="form.rideHailingCarInfoDTO.gpsBrand" placeholder="请输入卫星定位装置品牌"/>
          </el-form-item>
          <el-form-item label="卫星定位装胃型号" prop="gpsModel">
            <el-input v-model="form.rideHailingCarInfoDTO.gpsModel" placeholder="请输入卫星定位装胃型号"/>
          </el-form-item>
          <el-form-item label="卫星定位装置IMEI号" prop="gpsImei">
            <el-input v-model="form.rideHailingCarInfoDTO.gpsImei" placeholder="请输入卫星定位装置IMEI号"/>
          </el-form-item>
          <el-form-item label="卫星定位设备安装日期" prop="gpsInstallationDate">
            <el-date-picker clearable
                            v-model="form.rideHailingCarInfoDTO.gpsInstallationDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择卫星定位设备安装日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="报备日期" prop="reportDate">
            <el-date-picker clearable
                            v-model="form.rideHailingCarInfoDTO.reportDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择报备日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="服务类型" prop="serviceClass">
            <el-input v-model="form.rideHailingCarInfoDTO.serviceClass" placeholder="请输入服务类型"/>
          </el-form-item>
        </el-form>
      </div>
    </div>


    <div :hidden="isAvailable3">
      <el-form ref="form" :model="form.vehicleDocumentPhotos" :rules="rules" label-width="150px">
        <el-form-item label="车辆发票照片" prop="invoicePhoto">
          <image-upload v-model="form.vehicleDocumentPhotos.invoicePhoto" :limit="1"/>
        </el-form-item>
        <el-form-item label="合格证照片" prop="licensePlatePhoto">
          <image-upload v-model="form.vehicleDocumentPhotos.licensePlatePhoto" :limit="1"/>
        </el-form-item>
        <el-form-item label="行驶证照片" prop="drivingLicensePhoto">
          <image-upload v-model="form.vehicleDocumentPhotos.drivingLicensePhoto" :limit="1"/>
        </el-form-item>
        <el-form-item label="登记证书照片" prop="registrationCertificatePhoto">
          <image-upload v-model="form.vehicleDocumentPhotos.registrationCertificatePhoto" :limit="1"/>
        </el-form-item>
        <el-form-item label="完税证明照片" prop="taxCertificatePhoto">
          <image-upload v-model="form.vehicleDocumentPhotos.taxCertificatePhoto" :limit="1"/>
        </el-form-item>
        <el-form-item label="汽车运输证照片" prop="transportCertificatePhoto">
          <image-upload v-model="form.vehicleDocumentPhotos.transportCertificatePhoto" :limit="1"/>
        </el-form-item>
        <el-form-item label="其他一照片" prop="other1Photo">
          <image-upload v-model="form.vehicleDocumentPhotos.other1Photo" :limit="1"/>
        </el-form-item>
        <el-form-item label="其他一照片" prop="other2Photo">
          <image-upload v-model="form.vehicleDocumentPhotos.other2Photo" :limit="1"/>
        </el-form-item>
      </el-form>
    </div>

    <span :hidden="isAvailable4">
    <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
  </span>
    <span :hidden="isAvailable5">
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </span>
    <span :hidden="isAvailable6">
     <el-button type="primary" @click="submitForm">提交</el-button>
  </span>


  </div>
</template>

<script>
import { addInfo, updateInfo, updateInfoById } from '@/api/boss/info'
import { cityElementTree, cityElementList } from '@/api/boss/city'
import { listLevelAll } from '@/api/boss/level'
import { listModelAll } from '@/api/boss/model'
import { hidden } from 'chalk'

export default {
  data() {
    return {
      vehicleId: null,
      isAvailable: false,
      isAvailable1: false,
      isAvailable2: true,
      isAvailable3: true,
      isAvailable4: true,
      isAvailable5: false,
      isAvailable6: true,
      active: 1,
      form: {
        vehicleInfoDTO: {},
        vehicleDocumentPhotos: {},
        rideHailingCarInfoDTO: {}
      },
      cityElementTree: [],
      levelList: [],
      modelList: []
    }
  },
  watch: {
    'form.vehicleInfoDTO.installedVehicleBrain'(newVal) {
      if (this.form.vehicleInfoDTO.installedVehicleBrain === '1') {
        this.isAvailable = true
        this.form.vehicleInfoDTO.vehicleBrainBrand = null
        this.form.vehicleInfoDTO.vehicleBrainCode = null
      } else {
        this.isAvailable = false
      }
    },
    active() {
      if (this.active === 1) {
        this.isAvailable4 = true
        this.isAvailable1 = false
        this.isAvailable2 = true
        this.isAvailable3 = true
        this.isAvailable5 = false
        this.isAvailable6 = true
      }
      if (this.active === 2) {
        this.isAvailable1 = true
        this.isAvailable2 = false
        this.isAvailable3 = true
        this.isAvailable4 = false
        this.isAvailable5 = false
        this.isAvailable6 = true
      }
      if (this.active === 3) {
        this.isAvailable1 = true
        this.isAvailable2 = true
        this.isAvailable3 = false
        this.isAvailable5 = true
        this.isAvailable4 = false
        this.isAvailable6 = false
      }
    }
  },
  created() {
    cityElementTree().then(response => {
      this.cityElementTree = response.data
    })
    listLevelAll().then(response => {
      this.levelList = response.data
    })
    listModelAll().then(response => {
      this.modelList = response.data
    })
    if (this.$route.query.id != null) {
      updateInfoById(this.$route.query.id).then(response => {
        this.form = response.data
      })
    }
  },

  methods: {
    hidden,
    next() {
      if (this.active++ > 2) this.active = 3
    },
    prev() {
      if (this.active-- === 1) this.active = 1
    },
    submitForm() {
      if (this.$route.query.id != null) {
        updateInfo(this.form).then(response => {
          this.$modal.msgSuccess('修改成功')
          this.open = false
        })
      } else {
        addInfo(this.form).then(response => {
          this.$modal.msgSuccess('新增成功')
          this.open = false
        })
      }

      this.$router.push({ path: '/boss/carManage/carBaseInfo' })
    }
  }
}
</script>
